<template>
  <el-dialog :title="isEdit ? '编辑考勤' : '考勤补录'" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false" :before-close="close">
    <div>
      <el-form ref="RefForm" :model="formData" label-width="120px" :rules="formRules" status-icon>
        <div class="formDiv">
          <div class="divOne">
            <el-form-item label="员工编号" prop="EmployeeId">
              <el-input v-model="formData.EmployeeId" @blur="EmployeeIdBlur"></el-input>
            </el-form-item>
            <el-form-item v-if="formData.department" label="部门">
              <el-select v-model="formData.department.id" placeholder="请选择" @change="dptChangeHandler">
                <el-option v-for="item in dptList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="formData.work" label="工种">
              <el-select v-model="formData.work.id" placeholder="请选择">
                <el-option v-for="item in workList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="RFID卡号" prop="rfid">
              <el-input v-model="formData.rfid"></el-input>
            </el-form-item>
            <el-form-item label="进场时间" prop="EnterTime">
              <el-date-picker v-model="formData.EnterTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="出场时间" prop="LeaveTime">
              <el-date-picker v-model="formData.LeaveTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
          </div>
          <div class="divTwo">
            <el-form-item label="员工名称" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item v-if="formData.job" label="职位">
              <el-select v-model="formData.job.id" placeholder="请选择">
                <el-option v-for="item in jobList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="考勤方式" prop="AttendanceType">
              <el-select v-model="formData.AttendanceType" placeholder="请选择考勤方式">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="门禁卡号" prop="accessCardID">
              <el-input v-model="formData.accessCardID"></el-input>
            </el-form-item>
            <!-- <el-form-item label="进场读卡设备" prop="number">
              <el-input v-model="formData.accessCardID"></el-input>
            </el-form-item>
            <el-form-item label="出场读卡设备" prop="number">
            <el-input v-model="formData.number"></el-input>-->
            <!-- </el-form-item> -->
          </div>
        </div>
        <el-form-item label="备注" prop="number">
          <el-input v-model="formData.number" type="textarea"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  //   import { eleValidator } from '@/utils/tools'
  import { department, job, work, employee } from '@/api/api'
  export default {
    mixins: [dialogEditMixin],
    data() {
      // const _this = this
      return {
        formData: {
          EmployeeId: '',
          department: {
            id: ""
          },
          job: {
            id: ""
          },
          work: {
            id: ""
          },
          name: '',
          accessCardID: "",
          rfid: "",
          AttendanceType: "",
          EnterTime: "",
          LeaveTime: ""
        },
        options: [
          { label: '门禁', value: 1 },
          { label: '基站', value: 2 },
          { label: '门禁 + 基站', value: 3 },
        ],
        // 部门数据
        dptList: [],
        // 职位数据
        jobList: [],
        // 工种数据
        workList: [],
        formRules: {
          EmployeeId: [
            { required: true, message: '请输入员工编码', trigger: 'blur' }
          ],
          AttendanceType: [
            { required: true, message: '请选择考勤方式', trigger: 'change' }
          ],
          EnterTime: [
            { required: true, message: '请选择进场时间', trigger: 'change' }
          ],
          LeaveTime: [
            { required: true, message: '请选择出场时间', trigger: 'change' }
          ]
        },
        apiKey: {
          search: '/Attendance/Detail/',
          add: '/Attendance',
          put: '/Attendance/'
        }
      }
    },
    methods: {
      resetFormData() {
        this.formData = {
          EmployeeId: '',
          id: '',
          department: {
            id: ""
          },
          job: {
            id: ""
          },
          work: {
            id: ""
          },
          name: '',
          accessCardID: "",
          rfid: "",
          AttendanceType: "",
          EnterTime: "",
          LeaveTime: ""
        }
      },
      // 部门改变事件
      async dptChangeHandler(event) {
        this.formData.job.id = ''
        // 职位
        this.jobList = []
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let result = await job("post", obj, false)
          result.data.items.map((item) => {
            if (item.lenght === 0) {
              return
            } else {
              if (item.department.id === event) {
                this.jobList.push({
                  label: item.jobTitle,
                  value: item.id,
                })
              }
            }
          })
        } catch (err) {
          console.log(err)
        }
      },
      // 员工编号输入失去焦点
      async EmployeeIdBlur() {
        try {
          if (!this.formData.EmployeeId) {
            return
          }
          let obj = {
            pageIndex: "1",
            search: [{
              key: "employeeCode",
              value: this.formData.EmployeeId,
              operation: 0
            }]
          }
          const {
            data: { items: resData, count, pageIndex },
          } = await employee("post", obj, false)
          this.formData.id = resData[0].department ? resData[0].id : ''
          this.formData.department.id = resData[0].department ? resData[0].department.id : ''
          this.formData.job.id = resData[0].job ? resData[0].job.id : ''
          this.formData.work.id = resData[0].work ? resData[0].work.id : ''
          this.formData.name = resData[0].name
          this.formData.accessCardID = resData[0].accessCardID
          this.formData.rfid = resData[0].rfid
        } catch (err) {
          this.$message.warning('无此员工，请核实后输入！')
        }
      },
      async getDepartmentList() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let resList = await Promise.all([department('post', obj, false), job('post', obj, false), work('post', obj, false)])
          // 部门
          if (resList[0].code === 200) {
            this.dptList = resList[0].data.items.map(item => {
              if (item.lenght === 0) { return }
              return {
                label: item.deptName,
                value: item.id
              }
            })
          }
          // 职位
          if (resList[1].code === 200) {
            console.log()
            this.jobList = resList[1].data.items.map(item => {
              if (item.lenght === 0) { return }
              return {
                label: item.jobTitle,
                value: item.id
              }
            })
          }
          // 工种
          if (resList[2].code === 200) {
            this.workList = resList[2].data.items.map(item => {
              if (item.lenght === 0) { return }
              return {
                label: item.workName,
                value: item.id
              }
            })
          }
        } catch (err) {
          console.log(err)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .formDiv {
    display: flex;
    .divOne {
      flex: 1;
    }
    .divTwo {
      flex: 1;
    }
  }
  .el-select {
    width: 100%;
  }
  /deep/.el-date-picker {
    width: 100%;
  }
</style>
